<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <!-- <meta http-equiv="Content-Security-Policy" content="default-src *; img-src *; script-src *;"> -->
    <title>Hello World!</title>
    <link rel="stylesheet" href="./style.css">
  </head>
  <body>
    <h1>Hello World!</h1>
    <!-- We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>. -->

    <!-- <input type="range" /> -->
    <!-- <img src="http://placehold.it/6000x6000" alt=""> -->

    <!-- <button id="btn">show message dialog</button>

    <h3><a href="#" id="new">New Window</a></h3>
    <h3><a href="#" id="close">Close Window</a></h3>
    <h3><a href="#" id="font">Bad Fonts</a></h3> -->

    <!-- You can also require other files to run in this process -->


    <img id="img" width="500" height="400" src="https://placekitten.com/450/300" alt=""><br>

    <button id="zoom-up">Increase Zoom</button>
    <button id="zoom-down">Decrease Zoom</button>
    <button id="reset">Reset Zoom</button>

    <button id="catch">catch</button>

    <div>
      <img alt="" width="500" height="400" id="img2">
    </div>

    <div>
      <button id="open-window">打开窗口</button>
    </div>

    <script src="./renderer.js"></script>
  </body>
</html>
